<template>
  <van-button
    size="small"
    round
    :icon="value ? '' : 'plus'"
    @click="followBtnClick(autId)"
    :loading="loadingFollow"
    >{{ value ? '已关注' : '关注' }}</van-button
  >
</template>

<script>
import { followUser, cancelFollowUser } from '@/api/article'
export default {
  name: 'FollowIndex',
  components: {},
  props: {
    value: {
      type: Boolean,
      required: true
    },
    autId: {
      type: [String, Number, Object],
      required: true
    }
  },
  data() {
    return {
      loadingFollow: false
    }
  },
  created() {},
  mounted() {},
  activited() {},
  update() {},
  beforeRouteUpdate() {},
  methods: {
    followBtnClick(id) {
      this.loadingFollow = true
      // 视图上
      // this.is_followed = !this.is_followed
      //   this.$emit('updateFollowState')
      this.$emit('input', !this.value)
      // 更新数据需要时间,给下面的程序加个定时器
      setTimeout(async () => {
        // 发起axios请求,数据上改变
        if (this.value) {
          // 关注用户
          // 不能关注自己
          try {
            await followUser(id)
          } catch (error) {
            let message = '关注失败,请稍后再试'
            if (error.response && error.response.status === 400) {
              message = '不能关注自己'
            }
            //  this.is_followed = !this.is_followed
            // this.$emit('updateFollowState')
            this.$emit('input', !this.value)
            this.$toast.fail(message)
          }
        } else {
          try {
            await cancelFollowUser(id)
          } catch (error) {
            //   this.is_followed = !this.is_followed
            // this.$emit('updateFollowState')
            this.$emit('input', !this.value)
            this.$toast.fail('取消关注失败,请稍后再试')
          }
        }
        this.loadingFollow = false
      }, 0)
    }
  },
  filter: {},
  computed: {},
  watch: {}
}
</script>

<style lang="less" scoped></style>
